<template>
  <view class="container">
    <cu-custom bgColor="bg-pink" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">告警记录备注</block>
    </cu-custom>

    <view class="bg-top bg-pink">
      <view class="top-box shadow">
        <view class="cu-list menu">
          <!-- 备注 -->
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-writefill text-mauve margin-right-xs"></text>
              <text class="text-black">备注</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <u-input
                type="textarea"
                style="width: 600rpx; word-break: break-all"
                :maxlength="500"
                class="text-sm u-font-28"
                v-model="record.remark"
                placeholder="请输入备注"
                name="input"
              ></u-input>
            </view>
          </view>
        </view>
      </view>

      <!-- 保存 -->
      <view class="padding-lr flex margin-top-sm" style="justify-content: space-between; width: 750rpx">
        <button class="submit" @tap="submit" style="width: 100%">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      record: {
        id: null,
        remark: ''
      }
    }
  },
  async onLoad(option) {
    this.record.id = option.id
    if (option.remark) {
      this.record.remark = option.remark
    }
  },
  methods: {
    async submit() {
      const res = await this.$u.api.upAlarmRecord(this.record)
      if (res) {
        this.$u.toast('备注修改成功，正在为您跳转记录列表')

        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
            success: function () {
              uni.$emit('refreshAlarmRecordPage')
            }
          })
        }, 1500)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  color: #333333;

  .bg-top {
    margin-top: -1rpx;
    width: 750rpx;
    height: 220rpx;
    padding-top: 50rpx;
    border-radius: 0 0 20% 20%;

    .top-box {
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 20rpx 30rpx 0rpx;
      position: relative;

      .qh-title {
        width: 100%;
        height: 60rpx;
        line-height: 65rpx;
      }
    }
  }

  .submit {
    background-color: #e03997;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 30rpx;

    &::after {
      border: none;
    }
  }
}
</style>
